<template>
	<view class="order-menu">
		<Card_M class="padd" >
		  <view class="oo">
		  	<view class="time-moeny">
		  		<text class="order-time">
		  			{{props.order_data.time}}
		  		</text>
		  		<text class="money">{{props.order_data.money}}</text>
		  	</view>
		  	<view class="car-use-time">
		  		<u-icon name='clock-fill' size="12"></u-icon>
		  		<text class="use-time">{{props.order_data.usetime}}</text>
		  	</view>
			<view class="all" v-show="props.all">
				<view  class="order-stauts"  v-if="props.order_data.stauts==3">
					已完成
				</view>
				<view  class="order-stauts" v-if="props.order_data.stauts==1">
					<view class="s">
						
					</view>
					<text style="color: black;">骑行中</text>
				</view>
				<view  class="order-stauts" v-if="props.order_data.stauts==2">
					<view class="s" style="background-color: #000;">
						
					</view>
					<text style="color: black;">待支付</text>
				</view>
			</view>

			<view v-show="!props.all" class="all_1">
				<view  class="order-stauts" v-if="props.order_data.stauts==1">
					<view class="s">
						
					</view>
					<text style="color: black;">骑行中</text>
				</view>
				<view  class="order-stauts" v-if="props.order_data.stauts==2">
					<view class="s" style="background-color: #000;">
						
					</view>
					<text style="color: black;">待支付</text>
				</view>
			</view>
		  </view>
		</Card_M>
	</view>
</template>

<script setup>
// import Card_M from "../compents/card.vue"
import Card_M from "./card.vue"
import { reactive, defineProps } from 'vue';  
const props = defineProps(['order_data', 'all'])
</script>

<style scoped>
	.order-menu {
		width: 95%;
		background-color: #ffffff;
		position: relative;
		margin: 10px auto;
		border-radius: 8px;
	}
	.padd {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		border-radius: 5px;
	}
	.oo {
		position: relative;
		margin: 0 auto;
		height: 98%;
		width: 95%;
	}
	.order-time {
		font-size: 12px;
		color: #888884;

	}
	.time-moeny {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
		/* background-color: aqua; */
	}
	.money {
		font-size: 14px;
	}
	.car-use-time {
		margin-top: 5px;
		display: flex;
	}
	.use-time {
		margin-left: 5px;
		font-size: 13px;
		color: #323230;
	}
	.s {
		height: 5px;
		width: 5px;
		border-radius: 100%;
		background-color: green;
		margin-right: 10px;
	}
	.order-stauts {
		display: flex;
		align-items: center;
		margin-top: 20px;
		padding-top: 10px;
		border-top: 1px solid #b8b8b3;
		color: #888884;
		margin-bottom: 10px;
	}
</style>